<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen" />
</head>
<body>
<div th:replace="common/top"></div>
<div id="Content">
    <div id="Welcome">
        <div id="WelcomeContent">
            Welcome to MyPetStore!
        </div>
    </div>

    <div id="Main">
        <div id="Sidebar">
            <div id="SidebarContent">
                <div class="re1">
                    <ul>
                        <li ><img src="../image/fish1.gif" alt=""></li>
                        <li ><img src="../image/fish2.gif" alt=""></li>
                        <li ><img src="../image/fish3.gif" alt=""></li>
                        <li ><img src="../image/fish4.gif" alt=""></li>
                    </ul>
                    <a id="a1" href="/catalog/category?categoryId=FISH" ><img src="../image/fish_icon.gif" /></a>
                    <span id="p1"> Saltwater, Freshwater </span>
                </div>
                <div class="re2">
                    <ul>
                        <li ><img src="../image/dog1.gif" alt=""></li>
                        <li ><img src="../image/dog2.gif" alt=""></li>
                        <li ><img src="../image/dog3.gif" alt=""></li>
                        <li ><img src="../image/dog4.gif" alt=""></li>
                        <li ><img src="../image/dog5.gif" alt=""></li>
                        <li ><img src="../image/dog6.gif" alt=""></li>
                    </ul>
                    <a id="a2" href="/catalog/category?categoryId=DOGS"><img src="../image/dogs_icon.gif" /></a>
                    <span id="p2"> Various Breeds </span>
                </div>
                <div class="re3">
                    <ul>
                        <li ><img src="../image/cat1.gif" alt=""></li>
                        <li ><img src="../image/cat2.gif" alt=""></li>
                    </ul>
                    <a id="a3" href="/catalog/category?categoryId=CATS"><img src="../image/cats_icon.gif" /></a>
                    <span id="p3"> Various Breeds, Exotic Varieties </span>
                </div>
                <div class="re4">
                    <ul>
                        <li ><img src="../image/snake1.gif" alt=""></li>
                        <li ><img src="../image/lizard1.gif" alt=""></li>
                    </ul>
                    <a id="a4" href="/catalog/category?categoryId=REPTILES"><img src="../image/reptiles_icon.gif" /></a>
                    <span id="p4"> Lizards, Turtles, Snakes  </span>
                </div>
                <div class="re5">
                    <ul>
                        <li ><img src="../image/bird1.gif" alt=""></li>
                        <li ><img src="../image/bird2.gif" alt=""></li>
                    </ul>
                    <a id="a5" href="/catalog/category?categoryId=BIRDS"><img src="../image/birds_icon.gif" /></a>
                    <span id="p5">  Exotic Varieties </span>
                </div>
            </div>
        </div>
        <!--悬浮窗-->
        <div id="information" style="display: none">sssssssssss</div>
        <script type="text/javascript" src="../js/showInformation.js"></script>

        <div id="Mainimage">
            <div id="MainImageContent">
                <map name="estoremap">
                    <script type="text/javascript" src="../js/showInformation.js"></script>
                    <area id="selected0" alt="BIRDS" coords="72,2,280,250" href="/catalog/category?categoryId=BIRDS" shape="rect" />
                    <area id="selected1" alt="FISH" coords="2,180,72,250" href="/catalog/category?categoryId=FISH" shape="rect" />
                    <area id="selected2" alt="DOGS" coords="60,250,130,320" href="/catalog/category?categoryId=DOGS" shape="rect" />
                    <area id="selected3" alt="REPTILES" coords="140,270,210,340" href="/catalog/category?categoryId=REPTILES" shape="rect" />
                    <area id="selected4" alt="CATS" coords="225,240,295,310" href="/catalog/category?categoryId=CATS" shape="rect" />
                    <area id="selected5" alt="BIRDS" coords="280,180,350,250" href="/catalog/category?categoryId=BIRDS" shape="rect" />
                </map>
                <img height="355" src="../image/splash.gif" align="middle" usemap="#estoremap" width="350" />
            </div>
        </div>
        <div id="Separator">&nbsp;</div>
    </div>
</div>
<div th:replace="common/bottom"></div>
</body>
</html>